<template>
    <div class="info">
       <div class="info-header">
               个性资料
       </div>
<!--       <div class="info-photo">-->
<!--            <div class="photo-headline">照片</div>-->
<!--            <div class="photo-upload">-->
<!--               <van-uploader v-model="fileList" multiple :max-count="4" :max-size="3 * 1024 * 1024"-->
<!--                             @oversize="onOversize"/>-->
<!--              <div class="photo-tips">至少一张至多四张</div>-->
<!--            </div>-->
<!--       </div>-->
       <div class="info-describe">
           <div class="describe-headline">文字简介</div>
           <div class="describe-info-wrapper">
             <textarea placeholder="请输入自己遇到了什么事情?（选填）" class="describe-info" maxlength="10" οnchange="this.value=this.value.substring(0,200)" οnkeydοwn="this.value=this.value.substring(0, 200)" οnkeyup="this.value=this.value.substring(0, 200)"></textarea>
             <div class="describe-tips">0/200</div>
           </div>
       </div>
      <div class="info-sound">
        <div class="sound-headline">声音</div>
      </div>
      <div class="next">
        <router-link to="/clerk" id="next">下一步</router-link>
      </div>
    </div>
</template>

<script>
  import Vue from 'vue';
  import { Uploader } from 'vant';

  Vue.use(Uploader);
    export default {
        name: "UserData",
        data: function () {
          return {
            fileList: []
          }
        },
      methods: {
        onOversize(file) {
          console.log(file);
        },
      },
      beforeRouteEnter(to ,from,next){
        window.document.body.style.backgroundColor = '#fff';
        next();
      },
      beforeRouteLeave(to ,from,next){
        window.document.body.style.backgroundColor = '#f2f2f2';
        next();
      }
    }
</script>

<style scoped lang="stylus">
   @import '~style/mixins.styl'
   @import '~style/varibles.styl'
   .info
     .info-header
       background #F2F2F2
       padding .3rem .2rem
       font-size .3rem
       color #333
     .info-photo
       background #fff
       padding 0 .2rem
       .photo-headline
         padding .3rem 0
         font-size .3rem
         color #333
       .photo-tips
         font-size .2rem
         color #666
         padding .15rem 0
     .info-describe
       background #fff
       padding 0 .2rem
       .describe-headline
         padding .3rem 0
         font-size .3rem
         color #333
       .describe-info-wrapper
         .describe-info
           background #F2F2F2
           width calc(100% - .4rem)
           padding .2rem
           height 1.52rem
         .describe-tips
            font-size .2rem
            color #666
            padding .15rem 0
     .info-sound
       background #fff
       padding 0 .2rem
       .sound-headline
         padding .3rem 0
         font-size .3rem
         color #333
     .next
       width 100%
       position fixed
       bottom .3rem
       left 0
       right 0
       center()
       #next
         border-radius .5rem
         width calc(100% - .55rem)
         height .9rem
         center-align-items()
         color #fff
         font-size .3rem
         background $DefaultColor
















</style>
<style scoped>
</style>
